<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>

  <script>
    // const vir = {
    //   tag: 'div',
    //   attrs: {
    //     // className: ['a', 'b', 'c'],
    //     className: 'qwe',
    //     title: '嘻嘻嘻',
    //   },
    //   children: [
    //     '哈哈哈',
    //     {
    //       tag: 'a',
    //       attrs: {
    //         className: ['a', 'b', 'c'],
    //         href: 'http://www.baidu.com'
    //       },
    //       children: ['点我去百度']
    //     },
    //     {
    //       tag: 'ul',
    //       children: [{
    //         tag: 'li',
    //         children: ['项目一']
    //       },{
    //         tag: 'li',
    //         children: ['项目二']
    //       },{
    //         tag: 'li',
    //         children: ['项目三']
    //       },{
    //         tag: 'li',
    //         children: ['项目四']
    //       },{
    //         tag: 'li',
    //         children: ['项目五']
    //       }]
    //     }
    //   ]
    // }
    
    class Element {
      constructor(tag, attrs, children) {
        this.tag = tag
        this.attrs = attrs
        this.children = children
      }
    }

    class React {
      static createElement(tag, attrs, children) {
        return new Element(tag, attrs, children)
      }
    }
    
    function setAttrs(el, attrs) {
      // 2. 获取属性上面的所有键值对
      Object.entries(attrs).forEach(([key, value]) => {
        switch (key) {
          // 匹配类名
          case 'className':
            el.setAttribute('class', value)
            if (Array.isArray(value)) {
              // 是数组
              el.setAttribute('class', value.join(" "))
            } else if (typeof value === 'string') {
              // 是字符串
              el.setAttribute('class', value)
            }
            break;
          default:
            el.setAttribute(key, value)
        }
      })
    }

    class ReactDom {
      static render(vir, root) {
        const { tag, attrs, children } = vir
        // 1 创建节点
        const el = document.createElement(tag)
        // 2. 设置属性
        attrs && setAttrs(el, attrs)
        // 3. 添加内容
        children && children.forEach(v => {
          if(typeof v === 'string') {
            // 文本节点
            const text = document.createTextNode(v)
            el.appendChild(text)
          } else {
            ReactDom.render(v, el)
          }
        })
        // 4. 挂载节点
        root.appendChild(el)
      }
    }

    const vir = React.createElement('div', {
      className: 'container'
    }, [
      '哈哈哈',
      React.createElement('ul', {}, [
        React.createElement('li', {}, ['项目一']),
        React.createElement('li', {}, ['项目二']),
        React.createElement('li', {}, ['项目三']),
        React.createElement('li', {}, ['项目四']),
      ])
    ])

    ReactDom.render(vir, document.querySelector('#app'))
  </script>
</body>

</html>